// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';
$brand-theme: 'firefox';

@import '../protocol/components/custom-menu-list';
@import '../protocol/components/fxa-form';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/zap';
@import '~@mozilla-protocol/core/protocol/css/includes/lib';

// Hello developer in the future! This file serves multiple different pages
// which isn't so obvious, so make changes with care! Be sure to check the
// following pages: /firefox/, /firefox/mobile/.
// See issue https://github.com/mozilla/bedrock/issues/11405

$send-svg: '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(3.000000, 1.000000)" stroke="#{$color-link-hover}" stroke-width="2"><path d="M2,16 L2,20 C2,21.1045695 2.8954305,22 4,22 L14,22 C15.1045695,22 16,21.1045695 16,20 L16,2 C16,0.8954305 15.1045695,-2.02906125e-16 14,0 L4,0 C2.8954305,2.02906125e-16 2,0.8954305 2,2 L2,6" stroke-linecap="round"></path><path d="M2,4 L16,4"></path><path d="M2,18 L16,18"></path><path d="M3.55271368e-15,11 L10,11" stroke-linecap="round" stroke-linejoin="round"></path><polyline stroke-linecap="round" stroke-linejoin="round" points="6 7 10 11 6 15"></polyline></g></g></svg>';
$send-url: svg-url($send-svg);

// * -------------------------------------------------------------------------- */
// put spacing into variables so it's easier to adjust spacing at each break point

// xs
$v-grid-xs: $layout-xs;
$h-grid-xs: $layout-xs;

// md
$v-grid-md: $layout-md;
$h-grid-md: $layout-lg;

// lg
$v-grid-lg: $layout-lg;
$h-grid-lg: $layout-xl;

// * -------------------------------------------------------------------------- */
// utility class

.hidden {
    display: none !important; /* stylelint-disable-line declaration-no-important */
}

.c-main-header {
    text-align: center;

    .mzp-c-logo {
        margin: 0 auto $spacing-lg;
    }
}

// * -------------------------------------------------------------------------- */
// Protocol over-rides

.mzp-c-menu-list {
    // match the bottom margin of <p>
    margin-bottom: 1.25em;
}

.mzp-c-menu-list-title {
    margin-bottom: 0;
}

.mzp-t-download .mzp-c-menu-list-item.t-web a:hover::after {
    display: none;
}

.mzp-t-download .mzp-c-menu-list-item.t-getapp a:hover::after {
    background-image: $send-url;
}

// vertical spacing
main .mzp-l-content {
    padding-bottom: $v-grid-xs;
    padding-top: $v-grid-xs;

    @media #{$mq-md} {
        padding-bottom: $v-grid-md;
        padding-top: $v-grid-md;
    }

    @media #{$mq-lg} {
        padding-bottom: $v-grid-lg;
        padding-top: $v-grid-lg;
    }
}

// make buttons in drop down menus look like links
.c-menu-list-link {
    &,
    &.mzp-c-button.mzp-t-product {
        background-color: inherit;
        color: $color-link;
        display: block;
        font-family: inherit;
        font-weight: normal;
        padding: $spacing-sm 30px $spacing-sm $spacing-sm;
        border: 0;

        &:hover {
            color: $color-link-hover;
            background-color: $color-marketing-gray-20;
        }
    }
}

// center firefox logo on small viewports
.mzp-c-split.mzp-l-split-center-on-sm-md .mzp-c-logo {
    margin: 0 auto $spacing-2xl;

    @media #{$mq-md} {
        margin: 0 0 $spacing-2xl;
    }
}

// * -------------------------------------------------------------------------- */
// use split component for top banner

.c-landing-banner {
    h1 {
        @include text-title-xl;
    }

    p {
        @include text-body-lg;
    }

    &.t-products {
        padding-top: 0;
    }
}

// * -------------------------------------------------------------------------- */
// landing grid

.c-landing-grid-item {
    margin-bottom: $v-grid-xs * 2; // vertical spacing
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;

    &:last-child {
        margin-bottom: 0;
    }

    &.c-landing-grid-wide {
        max-width: 100%;
    }

    > p:last-child {
        margin-bottom: 0;
    }
}

.c-landing-grid-title {
    @include font-size(24px);
    margin-bottom: $spacing-md;
    margin-top: $spacing-xl;

    a {
        color: $color-ink-80;
        text-decoration: none;

        &:hover,
        &:focus {
            text-decoration: underline;
        }
    }

    + p {
        margin-bottom: $spacing-xl;
    }
}

.c-landing-grid-img {
    display: block;
    margin: 0 auto;
}

// two column grid for browsers that don't support display:grid
// works in RTL without bidi styles \o/
@media #{$mq-md} {
    .c-landing-grid-item {
        float: left;
        margin-bottom: $v-grid-md * 2;
        margin-left: $h-grid-md;
        max-width: 100%;
        width: calc(50% - #{$h-grid-md * 0.5});

        &:nth-child(odd) {
            clear: left;
            margin-left: 0;
        }
    }
}

@media #{$mq-lg} {
    .c-landing-grid-item {
        margin-bottom: $v-grid-lg * 2;
        margin-left: $h-grid-lg;
        width: calc(50% - #{$h-grid-lg * 0.5});
    }
}

// column grid for browsers that do support grid
@supports (display:grid) {
    // two column
    @media #{$mq-md} {
        .c-landing-grid {
            @include grid-column-gap($h-grid-md);
            @include grid-row-gap(#{$v-grid-md * 2});
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        // need to remove :after added by .mzp-l-content or we get an extra grid row
        // added for clearfix purposes but grids don't need a clearfix
        .c-landing-grid::after {
            content: none;
        }

        .c-landing-grid-item {
            margin-bottom: 0; // vertical spacing now set as row-gap instead of margin-bottom
            margin-left: 0;
            width: auto; // over-ride 50% width from float layout
        }

        .c-landing-grid-img {
            max-width: 100%;
        }
    }

    // three column
    @media #{$mq-lg} {
        .c-landing-grid {
            @include grid-column-gap($h-grid-lg);
            @include grid-row-gap(#{$v-grid-lg * 2});
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}

// * -------------------------------------------------------------------------- */
// Download icon for "download for desktop" link

@function download-arrow($color) {
    $svg: '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g transform="translate(6.000000, 3.000000)" stroke="#{$color}" stroke-width="2"><path d="M0,18 L12,18"></path><polyline stroke-linejoin="round" points="0 8 6 14 12 8"></polyline><path d="M6,0 L6,14"></path></g></g></svg>';
    @return $svg;
}

$download-link: download-arrow($color-link);
$download-link-hover: download-arrow($color-link-hover);
$url-download-link: svg-url($download-link);
$url-download-link-hover: svg-url($download-link-hover);

.cta-download {
    border-radius: $border-radius-md;
    border: 2px solid $color-marketing-gray-30;
    display: block;
    padding: $spacing-sm;
    @include bidi((
        (padding-right, ($spacing-sm + 42px), $spacing-sm),
        (padding-left, $spacing-sm, ($spacing-sm + 42px)),
    ));
    position: relative;
    text-decoration: none;
    transition: border-color 100ms ease, background-color 100ms ease;

    &:hover {
        background: $color-marketing-gray-20;
        border-color: $color-marketing-gray-40;

        &::before {
            border-color: $color-marketing-gray-40;
        }
    }

    &::after {
        @include background-size(23px);
        @include bidi(((right, $spacing-md, left, auto),));
        background-image: $url-download-link;
        background-position: center center;
        background-repeat: no-repeat;
        top: 0;
        content: '';
        display: inline-block;
        height: 100%;
        position: absolute;
        width: 16px;
    }

    &:hover::after {
        background-image: $url-download-link-hover;
    }
}

// issue 13317
.fx-unsupported .cta-download[data-cta-type="firefox"]{
    display: none;
}

// issue 13317
.fx-unsupported .menu-desktop {
    display: none;
}

// * -------------------------------------------------------------------------- */
// Mobile download links, show app store links when user is on mobile

.appstore-android,
.appstore-ios {
    display: none;
    margin-bottom: 1.25em;

    img {
        display: block;
    }
}

.android .appstore-android {
    display: block;
}

.ios .appstore-ios {
    display: block;
}

.ios,
.android {
    #menu-mobile-wrapper,
    #card-desktop-download,
    #desktop-download {
        display: none;
    }
}

#menu-browsers {
    .ios & .menu-desktop,
    .ios & .menu-android,
    .android & .menu-desktop,
    .android & .menu-ios {
        a {
            pointer-events: none;
            color: $color-marketing-gray-50;
        }
    }
}

// * -------------------------------------------------------------------------- */
// dev tools and desktop compare blocks

.t-compare {
    background-color: $color-marketing-gray-20;
    margin-top: $layout-xs + $layout-2xl;

    &.mzp-c-split {
        padding: $layout-xl $layout-xs $layout-xs;
        overflow-x: visible;
    }

    .mzp-c-split-container {
        padding-right: 0;
        padding-left: 0;
    }

    h2 {
        @include visually-hidden;
    }

    .mzp-c-split-media {
        position: absolute;
        top: $layout-2xl * -1;
    }
}

.c-compare-title {
    @include text-title-sm;
    font-weight: bold;
}

@media #{$mq-sm} {
    .t-compare {
        margin-left: auto;
        margin-right: auto;
        max-width: $content-xs;

        &.mzp-c-split {
            overflow-x: visible;
        }
    }
}

@media #{$mq-md} {
    .t-compare {
        border-radius: $border-radius-sm;
        margin-top: 0;
        max-width: 100%;

        &.mzp-c-split {
            padding: $layout-md;
        }

        .mzp-c-split-media {
            margin-top: 0;
            position: relative;
            top: 0;
            justify-self: stretch;
        }

        .mzp-c-split-media-asset {
            width: 100%;
        }
    }
}
